<template>

    <Form :model="formItem" :label-width="84">
        <FormItem label="服务名称">
            <Input style="width:80%"></Input>
        </FormItem>
        <FormItem label="图片">
            <Upload action="//jsonplaceholder.typicode.com/posts/">
                <Button type="ghost" icon="ios-cloud-upload-outline">选择上传文件</Button>
            </Upload>
        </FormItem>
        <FormItem label="订单支付">
            <i-switch v-model="formItem.switch" size="large">
                <span slot="open">开启</span>
                <span slot="close">关闭</span>
            </i-switch>
        </FormItem>
        <FormItem label="多选项目">
            <i-switch v-model="formItem.switch" size="large">
                <span slot="open">开启</span>
                <span slot="close">关闭</span>
            </i-switch>
            <Button type="primary" icon="plus-round">新增内容</Button>
        </FormItem>
        <FormItem label="服务内容" style="width:60%">
            <Input style="width: 150px"></Input>
            <Button type="primary">上传文件</Button>
            <br/>
            <Input style="width: 150px"></Input>
            <Button type="primary">上传文件</Button>
        </Upload>
        </FormItem>
        <FormItem label="排序">
            <Input style="width:80%"></Input>
        </FormItem>
        <FormItem>
            <Button type="primary">提交</Button>
        </FormItem>
    </Form>
</template>
<script>
    export default {
        data () {
            return {
                formItem: {
                    input: '',
                    select: '',
                    radio: 'male',
                    checkbox: [],
                    switch: true,
                    date: '',
                    time: '',
                    slider: [20, 50],
                    textarea: ''
                },
                cityList: [
                    {
                        value: 'New York',
                        label: 'New York'
                    },
                    {
                        value: 'London',
                        label: 'London'
                    },
                    {
                        value: 'Sydney',
                        label: 'Sydney'
                    },
                    {
                        value: 'Ottawa',
                        label: 'Ottawa'
                    },
                    {
                        value: 'Paris',
                        label: 'Paris'
                    },
                    {
                        value: 'Canberra',
                        label: 'Canberra'
                    }
                ],
                model10: []
            }
        }
    }
</script>
